{extend name="common/page"}
{block name="style"}
{__block__}
<style>
    #cat-tree{
        position: absolute;
        z-index: 999;
        background-color: #fff;
        border: 1px solid #EEE;
        display: none;
        font-size: 16px;
    }
    .layui-field-box{
        padding: 15px;
        display: -webkit-flex;
        display: flex;
    }
    #upload-btn{
        display: -webkit-flex;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }
    #upload-btn:hover{
        border: 1px solid #999999;
    }
    #thumb-box{
        display: -webkit-flex;
        display: flex;
        flex-wrap: wrap;
    }
    #thumb-box .thumb-item{
        width: 100px;
        height: 96px;
        border: 1px solid #eee;
        padding: 2px;
        margin: 0 2px 2px 0;

        display: -webkit-flex;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #thumb-box .thumb-item img{
        max-width: 100%;
        max-height: 100%;
    }
</style>
{/block}

<!--编辑器js-->
{block name="js"}
{__block__}
{include file="common/editor-js"}
{/block}

{block }
{block name="content"}
<form class="layui-form" action="">
    <div id="cat-tree"></div>
    {if $multilingual === 1}
    <div class="layui-form-item">
        <label class="layui-form-label">语言</label>
        <div class="layui-input-block">
            <select name="language_id" lay-verify="required">
                {volist name="languages" id="language"}
                <option value="{$language.id}">{$language.name} ({$language.flag | strtoupper})</option>
                {/volist}
            </select>
        </div>
    </div>
    {/if}
    <div class="layui-form-item">
        <label class="layui-form-label">标题</label>
        <div class="layui-input-block">
            <input type="text" name="name" required lay-verify="required" placeholder="请输入文章标题" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">栏目</label>
        <div class="layui-input-inline">
            <input type="hidden" name="category_id">
            <input id="category-name" type="text" required lay-verify="required" placeholder="请选择栏目" autocomplete="off"
                   class="layui-input" disabled>
        </div>
        <a id="select-cat" class="layui-btn layui-btn-radius layui-btn-primary">选择栏目</a>
    </div>
    <fieldset class="layui-elem-field">
        <legend>缩略图</legend>
        <div class="layui-field-box">
            <div id="thumb-box">
                <div class="thumb-item">
                    <img src="http://frog.uniteedu.cn/uploads/20181115/efbb04b66c5c17db3a3db9bd644ff28c.JPG" alt="">
                </div>
                <div class="thumb-item">
                    <img src="http://frog.uniteedu.cn/uploads/20181115/efbb04b66c5c17db3a3db9bd644ff28c.JPG" alt="">
                </div>
                <div class="thumb-item">
                    <img src="http://frog.uniteedu.cn/uploads/20181115/efbb04b66c5c17db3a3db9bd644ff28c.JPG" alt="">
                </div>
                <div class="thumb-item" id="upload-btn">
                    <svg t="1542252419335" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                         p-id="17721" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48">
                        <defs>
                            <style type="text/css"></style>
                        </defs>
                        <path d="M485.984865 485.984865H0v28.588973h485.984865v485.984865h28.588973v-485.984865h485.984865V485.984865h-485.984865V0H485.984865v485.984865z"
                              p-id="17722" fill="#eeeeee"></path>
                    </svg>
                </div>
            </div>
        </div>
    </fieldset>
    <div class="layui-form-item">
        <label class="layui-form-label">显示</label>
        <div class="layui-input-block">
            <input type="radio" name="status" value="1" title="是" checked>
            <input type="radio" name="status" value="2" title="否">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">排序</label>
        <div class="layui-input-block">
            <input value="100" type="number" name="list_order" required lay-verify="required" placeholder="请输入排序1-999整数，小在前" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">详情</label>
        <div class="layui-input-block">
            <textarea name="content" id="content" placeholder="请输入内容" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="addForm">修改</button>
        </div>
    </div>
</form>
{/block}

{block name="script"}
{__block__}
<script>
    $k.mkEditor();
    var nodes = JSON.parse('{$tree|raw|json_encode}');

    layui.use(['form', 'tree', 'upload'], function () {
        $k.submit('addForm', '/admin/product/add', function () {
            // reload category data table to refresh data
            $k.reload(parent.tableInst, '/admin/product/all');
            // 关闭父级弹出层
            $k.adminClose();
        }, true);

        $k.upload({
            done: function (res) {
                var newItem = mkThumbItem(res.success_response.data.path);
                $('#upload-btn').before(newItem);
            }
        });
        function mkThumbItem(src){
            var item = document.createElement('div');
            $(item).addClass('thumb-item');
            var itemImg = document.createElement('img');
            $(itemImg).attr('src', 'http://' + location.host + '/' + src);
            var itemInput = document.createElement('input');
            $(itemInput).attr('name', 'thumb[]').attr('type', 'hidden').val(src);

            $(item).append(itemImg).append(itemInput);


            return item;
        }

        layui.tree({
            elem: '#cat-tree',
            nodes: nodes
            ,click: function(node){
                if (node.children.length !== 0) return;
                $('input[name="category_id"]').val(node.id);
                $('#category-name').val(node.name);
                $('#cat-tree').slideUp('fast');
            }
        });

        $('body').click(function (e) {
            var target = $(e.target);
            var catTree = $('#cat-tree');
            if (!target.is('#cat-tree *') && !target.is('#select-cat')) {
                if (catTree.is(':visible')) {
                    catTree.slideUp();
                }
            }
        });

        $('#select-cat').click(function () {
            var catTree = $('#cat-tree');
            var display = catTree.css('display');
            if (display === 'block') {
                catTree.slideUp();
                return;
            }
            var p = $(this).offset();
            var h = $(this).height();
            catTree.css('top', p.top + h + 10)
                .css('left', p.left)
            catTree.slideDown();

        })
    })


</script>
{/block}